/**
 * @file filter
 * @author liaoxuezhi@baidu.com
 */
/* eslint fecs-indent: [0, "space", 2, 2] */

import * as React from 'react';
import {
  PureComponent,
  PropTypes
} from 'react';
import * as cx from 'classnames';
import {
  FormGroup,
  HelpBlock,
  Checkbox
} from 'react-bootstrap';
import * as assign from 'object-assign';
import {Enhance as FormItem} from '../form-item';
import {filter} from '../../util';
import Html from '../../../widgets/html';

@FormItem({
  type: 'checkbox',
  haveLabel: false,
  test: (path, config) => /(?:^|\/)form-item$/.test(path) && config.type === 'checkbox' && !config.option,
  validateSchema: 'http://amis.baidu.com/schemas/form.json#/definitions/formItem'
})
export default class FormCheckbox extends PureComponent {
  static propTypes = {
    className: PropTypes.string,
    formMode: PropTypes.string,
    formHorizontal: PropTypes.object
  };
  
  static defaultProps = {
    value: '',
    trueValue: true,
    falseValue: false
  };

  componentWillMount() {
    this.changeValue = this.changeValue.bind(this);
  }

  changeValue(event) {
    const target = event.currentTarget;
    const {trueValue, falseValue} = this.props;
    this.props.setValue(target.checked ? trueValue : falseValue);
  }

  render() {
    const {
      formMode,
      inputClassName,
      label: option,
      disabled,
      inline,
      trueValue
    } = this.props;
    const value = this.props.getValue();


    return (
      <div 
        key="checkbox" 
        className={cx("checkbox", inputClassName, {
          'inline-checkbox': inline,
          'm-l-sm': formMode === 'inline'
        })}
      >
        <label
          className="i-checks"
        >
          <input
            checked={value == trueValue}
            onChange={this.changeValue}
            disabled={disabled}
            type="checkbox"
            value="on" />
          <i />
          {option}
        </label>
      </div>
    );
  }
}

@FormItem({
  name: 'checkbox2',
  type: 'checkbox',
  test: (path, config) => /(?:^|\/)form-item$/.test(path) && config.type === 'checkbox' && config.option,
  validateSchema: 'http://amis.baidu.com/schemas/form.json#/definitions/formItem'
})
class FormCheckbox2 extends PureComponent {
  static propTypes = {
    className: PropTypes.string,
    formMode: PropTypes.string,
    formHorizontal: PropTypes.object
  };

  static defaultProps = {
    value: '',
    trueValue: true,
    falseValue: false
  };

  componentWillMount() {
    this.changeValue = this.changeValue.bind(this);
  }

  changeValue(event) {
    var target = event.currentTarget;
    const {trueValue, falseValue} = this.props;
    this.props.setValue(target.checked ? trueValue : falseValue);
  }

  render() {
    const {
      data,
      formMode,
      inputClassName,
      option,
      inline,
      disabled,
      trueValue
    } = this.props;
    const value = this.props.getValue();


    return (
      <div
        key="checkbox"
        className={cx("checkbox", inputClassName, {
          'inline-checkbox': inline,
          'm-l-sm': formMode === 'inline'
        })}
      >
        <label
          className="i-checks"
        >
          <input
            checked={value == trueValue}
            onChange={this.changeValue}
            disabled={disabled}
            type="checkbox"
            value="on" />
          <i />
          <Html style={{display: 'inline'}} html={filter(option, data)} />
        </label>
      </div>
    );
  }
}
